/**
 * animatable button
 * @author showtan on 2018.10.23
 * @param {animationType} animatable类型 https://daneden.github.io/animate.css/
 * @param {onPress} function
 */

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Text, TouchableWithoutFeedback } from 'react-native';
import { View } from 'react-native-animatable';

export default class AnimationCell extends PureComponent {
    static propTypes = {
        animationType: PropTypes.string.isRequired,
        onPress: PropTypes.func.isRequired
    };

    ref = null;
    handleRef = ref => {
        this.ref = ref;
    };

    handlePress = () => {
        if (this.ref && this.props.onPress) {
            this.props.onPress(this.ref, this.props.animationType);
        }
    };

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.handlePress}>
                <View ref={this.handleRef} style={this.props.style} useNativeDriver={true}>
                    <Text style={this.props.textStyle}>{this.props.text}</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}